<template>
	<view class="content">
	<!-- 	<h1>hello uni-app</h1>
		<div>hello uni-app</div>
		<div>{{msg}}</div>
		<input type="text" v-model="title">
		<p>{{title}}</p>
		<p>{{list}}</p>
		<ul>
			<li v-for="item,index in list" :key="index" @longpress="change(index)">{{item}}</li>
		</ul>
		<input type="text" placeholder="输入内容" @input="changeVal"> -->
		
		<!-- 轮播图 -->
		<div class="banner">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item class="swiper-item" v-for="item,index in bannerList" :key="index">
					<image :src="item.image_src" mode="widthFix"></image>
				</swiper-item>
				
			</swiper>
			
		</div>
	</view>
</template>

<script>
	import {getBanner,getNav} from '../../utils/api.js'
	export default {
		data() {
			return {
				title: 'Hello',
				msg:'今天是学习uni的第一天我感觉特别好',
				list:[1,2,3,4,5],
				bannerList:[],//存放轮播图的数组
				navList:[],//存放导航
			}
		},
		onLoad() {
			getBanner().then(res=>{
				 this.bannerList = res
			})
			getNav().then(res=>{
				this.navList = res
				console.log(this.navList);
				
			})
			
			// https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata
			// 发送网络请求
			// uni.request({
			// 	url:'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
			// 	method:"GET",
				
			// 	success:(res)=>{
					
			// 			if(res.data.meta.status == 200){
			// 				this.bannerList = res.data.message
							
			// 			}
			// 	}
			// })
			

		},
		methods: {
			change(index){
				console.log(index);
				
			},
			changeVal(e){
				console.log(e.target.value);
				console.log(e.detail.value);
			}

		}
	}
</script>

<style lang="scss">
	

	.banner{
		swiper-item{
			width: 100%;
			height: 200px;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
